<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:tiles="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org" lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Taxis</title>

		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="description" content="" />
		<meta name="author" content="" />

		<!-- basic styles -->

		<script src="../../static/jquery/jquery-2.0.3.min.js" th:src="@{/static/jquery/jquery-2.0.3.min.js}"></script>
		<link href="../../static/bootstrap/css/bootstrap.min.css" th:href="@{/static/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
		<script src="../../static/bootstrap/js/bootstrap.min.js" th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
		<link href="../../static/font-awesome/css/font-awesome.min.css" th:href="@{/static/font-awesome/css/font-awesome.min.css}" rel="stylesheet" />			

		<link href="../../static/jquery/jquery-ui.css" th:href="@{/static/jquery/jquery-ui.css}" rel="stylesheet" />
		<script src="../../static/jquery/jquery-ui.js" th:src="@{/static/jquery/jquery-ui.js}"></script>	
	
		<!-- fonts -->

		<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" th:href="@{'http://fonts.googleapis.com/css?family=Open+Sans:400,300'}" rel="stylesheet" />		
		
		<!-- ace styles -->

		<link href="../../static/custom/ace.min.css" th:href="@{/static/custom/ace.min.css}" rel="stylesheet" />
		<link href="../../static/custom/ace-rtl.min.css" th:href="@{/static/custom/ace-rtl.min.css}" rel="stylesheet" />
		<link href="../../static/custom/ace-skins.min.css" th:href="@{/static/custom/ace-skins.min.css}" rel="stylesheet" />

		<!--[if lte IE 8]>
		  <link href="../../static/custom/ace.min.css" th:href="@{/static/custom/ace-ie.min.css}" rel="stylesheet" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->

		<script src="../../static/custom/ace-extra.min.js" th:src="@{/static/custom/ace-extra.min.js}"></script>

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

		<!--[if lt IE 9]>
		<script src="../../static/custom/html5shiv.js" th:src="@{/static/custom/html5shiv.js}"></script>
		<script src="../../static/custom/respond.min.js" th:src="@{/static/custom/respond.min.js}"></script>
		<![endif]-->		
	</head>

	<body tiles:fragment="content">	
	<link href="../../static/datepicker/datepicker.css" th:href="@{/static/datepicker/datepicker.css}" rel="stylesheet" />	
	<link href="../../static/handsontable/jquery.handsontable.full.css" th:href="@{/static/handsontable/jquery.handsontable.full.css}" rel="stylesheet" />

			<div class="breadcrumbs" id="breadcrumbs">
				<script type="text/javascript">
					try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
				</script>
				<ul class="breadcrumb">
					<li>
						<i class="fa fa-home home-icon"></i>								
						<a href='/' th:href="@{/}">Inicio</a>
					</li>
					<li>
						<a href="/serviciosRecientes" th:href="@{/serviciosRecientes}">Reserva de Servicios</a>
					</li>
					<li class="active">Modificar Servicio</li>
				</ul><!-- .breadcrumb -->
			</div>			
			<div class="page-content">
				<div class="page-header">
					<h1>
						Orden de Servicio
						<small>
							<i class="fa fa-angle-double-right"></i>
							Modificar orden de servicio
						</small>
					</h1>
				</div><!-- /.page-header -->
				<div class="row">
					<div class="col-xs-12">						
						<div class="col-sm-11">
						<form class="form-horizontal" role="form" th:object="${ordenServicio}">
							<div class="widget-box">
								<div class="widget-header widget-header-flat">
									<h4>Informaci&oacute;n del servicio</h4>
								</div>	
								<div class="widget-body">
									<div class="widget-main">
										<div class="row">
											<div class="col-xs-6">
												<h3 class="header smaller lighter green">Informaci&oacute;n del pasajero</h3>
												<input type="hidden" th:value="${pasajero.nombres}" id="campoP0"/>
												<input type="hidden" th:value="${pasajero.apellidos}" id="campoP1"/>
												<input type="hidden" th:value="${pasajero.tipoDocumento}" id="campoP2"/>
												<input type="hidden" th:value="${pasajero.numDocumento}" id="campoP3"/>
												<input type="hidden" th:value="${pasajero.todosTelefonos}" id="campoP4"/>
												<input th:if="${pasajero.flagPertenece}" type="hidden" value="Si" id="campoP5"/>
												<input th:unless="${pasajero.flagPertenece}" type="hidden" value="No" id="campoP5"/>																											
												<div id="excelGrid" class="handsontable"></div>
												<div class="space"></div>
												<div class="col-xs-6">
													<h3 class="header smaller lighter green">Centro de costo</h3>													
													<select class="form-control" id="campoCentroCosto" th:field="*{centroCosto.id}">
														<option th:each="cCosto : ${listaCentroCostos}" th:value="${cCosto.id}" th:text="${cCosto.nombre}">Logística</option>												
													</select>
												</div>
											</div>
											<div class="col-xs-3">
												<h3 class="header smaller lighter green">Fecha del servicio</h3>
												<div class="space"></div>
												<h5 id="campoFecha" th:text="${#dates.format(ordenServicio.fechaServicio, #messages.msg('date.formatFecha'))}">10/10/10</h5>
											</div>
											<div class="col-xs-3">
												<h3 class="header smaller lighter green">Hora del servicio</h3>
												<div class="space"></div>
												<h5 id="campoHora" th:text="${#dates.format(ordenServicio.fechaServicio, #messages.msg('date.formatHora'))}">10:10</h5>
											</div>
										</div>
									</div>
								</div>
								</div>
								<div class="space"></div>
								<div class="widget-box">
									<div class="widget-header widget-header-flat">
										<h4>Descripci&oacute;n del Servicio</h4>
									</div>
	
									<div class="widget-body">
										<div class="widget-main">
											<div class="row">
												<div class="col-xs-12">												
													<div class="form-group">	
														<div class="col-sm-4">																
															<label class="col-sm-6 control-label" for="campoTipoServicio"> Tipo de Servicio </label>
															<div class="col-sm-6">
																<select class="col-sm-12" id="campoTipoServicio" th:field="*{tipoServicio}">
																	<option value="punto a punto">Punto a punto</option>
																	<option value="courier">Courier</option>
																	<option value="hora urbana">Por hora urbana</option>
																	<option value="hora interurbana">Por hora interurbana</option>
																	<option value="dia urbano">Por d&iacute;a urbano</option>
																	<option value="dia interurbano">Por d&iacute;a interurbano</option>
																</select>
															</div>
														</div>
														<div class="col-sm-5">
															<label class="col-sm-3 control-label" for="campoTipoVehiculo"> Tipo de Veh&iacute;culo </label>															
															<div class="col-sm-9">
																	<select class="col-sm-5" id="campoTipoVehiculo" th:field="*{tipoVehiculo}">
																		<option value="sedan">Sed&aacute;n</option>
																		<option value="4x4">4x4</option>
																		<option value="van">Van</option>
																		<option value="coaster">Coaster</option>
																		<option value="bus">Bus</option>
																	</select>
																	<span class="help-inline col-sm-7">
																	<label class="middle">
																		<input class="ace" type="checkbox" id="campoMaletera" th:checked="${ordenServicio.maleteraAmplia}" th:disabled="${ordenServicio.tipoVehiculo != 'sedan'}"/>
																		<span class="lbl"> Maletera amplia</span>
																	</label>
																</span>
															</div>																													
														</div>
														<div class="col-sm-2">																
															<label class="col-sm-5 control-label" for="campoTarifa"> Tarifa </label>
															<div class="col-sm-7">
																<input type="text" id="campoTarifa" class="col-xs-12" readonly="readonly" th:value="${subTarifa}"/>
															</div>
														</div>
													</div>
													<hr/>
													<div class="form-group">
														<div class="col-sm-4">
															<div class="col-sm-offset-1">												
																<a href="#modal-origen" class="btn btn-primary btn-block" data-toggle="modal">
																	<i class="fa fa-flag-o align-top bigger-125"></i>
																	Punto de Partida
																</a>
															</div>																															
														</div>
														<div class="col-sm-4">																
															<label class="col-sm-5 control-label" for="campoOrigen"> Direcci&oacute;n de origen </label>
															<div class="col-sm-7">
																<input type="text" id="campoOrigen" class="col-xs-12" readonly="readonly" th:value="${ordenServicio.puntoOrigen.direccion}"/>																
															</div>																
														</div>
														<div class="col-sm-4">																
															<label class="col-sm-4 control-label" for="campoZona"> Zona </label>
															<div class="col-sm-6">
																<input type="text" id="campoZona"  class="col-xs-10 col-sm-9" readonly="readonly" th:value="${ordenServicio.puntoOrigen.zona.nombre}"/>
															</div>
															<input type="hidden" id="campoLatitud" th:value="${ordenServicio.puntoOrigen.latitud}"/>
															<input type="hidden" id="campoLongitud" th:value="${ordenServicio.puntoOrigen.longitud}"/>
														</div>															
													</div>
													<div id="divDestino1">
														<div id="destinoUnico" class="form-group">
															<div class="col-sm-4">
																<div class="col-sm-offset-1">												
																	<a id="flagEditarDestino" href="#modal-nuevoDestino" class="btn btn-primary btn-block" data-toggle="modal">
																		<i class="fa fa-flag-checkered align-top bigger-125"></i>
																		Punto de Llegada
																	</a>
																</div>																															
															</div>
															<div class="col-sm-4">																
																<label class="col-sm-5 control-label" for="campoDestino"> Direcci&oacute;n de destino </label>
																<div class="col-sm-7">
																	<input type="text" id="campoDestino" class="col-xs-12" readonly="readonly" th:value="${ordenServicio.destinos.size() != 0} ? ${ordenServicio.destinos[0].puntoDestino.direccion}"/>																
																</div>																
															</div>
															<div class="col-sm-4">																
																<label class="col-sm-4 control-label" for="campoZonaDestino"> Zona </label>
																<div class="col-sm-6">
																	<input type="text" id="campoZonaDestino"  class="col-xs-10 col-sm-9" readonly="readonly" th:value="${ordenServicio.destinos.size() != 0} ? ${ordenServicio.destinos[0].puntoDestino.zona.nombre}"/>
																</div>
															</div>															
														</div>
													</div>
													<hr/>
													<div class="col-xs-12">
													<div id="divDestino2">
														<div id="destinosMultiples" style="display: none;">
															<h3 class="header smaller lighter green">Seleccionar destinos</h3>
															<div class="table-responsive col-xs-8">							
																<table id="tabla-destinos" class="table table-bordered table-hover">
																	<thead>
																		<tr>
																			<th>Direcci&oacute;n</th>
																			<th>Zona</th>
																			<th>Costo</th>
																			<th></th>
																			<th>Latitud</th>
																			<th>Longitud</th>
																		</tr>
																	</thead>
																	<tbody>
																		<tr th:each="destino : ${ordenServicio.destinos}">
																			<td th:text="${destino.puntoDestino.direccion}">Av Avenida 123</td>
																			<td th:text="${destino.puntoDestino.zona.nombre}">Zona</td>
																			<td th:text="${destino.tarifa}">Costo</td>
																			<td><div class='visible-md visible-lg hidden-sm hidden-xs action-buttons'><button type='button' class='btn btn-minier btn-light btnEliminarDestino'><i class='fa fa-trash-o bigger-130 red'></i></button></div></td>
																			<td th:text="${destino.puntoDestino.latitud}">-23.23452345</td>
																			<td th:text="${destino.puntoDestino.longitud}">12.3242314</td>
																		</tr>
																	</tbody>
																</table>
															</div>
														</div>
														<div class="col-xs-2 btn-group btn-group btn-group-vertical" id="btnDestinos2" style="display: none;">
																<a id="flagAgregarDestino" href="#modal-nuevoDestino" class="btn btn-primary btn-sm" data-toggle="modal">
																	<i class="fa fa-plus-circle align-top bigger-125"></i>
																	Agregar Destino
																</a>
														</div>
														<div class="col-xs-2 btn-group btn-group btn-group-vertical">
																<a href="#modal-ruta" class="btn btn-primary btn-sm" data-toggle="modal">
																	<i class="fa fa-road align-top bigger-125"></i>
																	Ver Ruta
																</a>
														</div>
													</div>
														<div class="col-xs-8" >
															<label class="col-sm-2 control-label">Total</label>
																 <div class="col-sm-4">
																	 <h5><strong>S/. </strong><strong id="campoTotal" th:text="${ordenServicio.totalTarifa}"> 0</strong></h5>
																</div>
																<div class="col-sm-6 checkbox">
																	<label>
																		<input th:if="${derechoCredito}" name="form-field-checkbox" type="checkbox" class="ace" id="campoCredito" th:checked="${ordenServicio.tipoPago == 'Credito' ? 'true' : 'false'}"/>
																		<input th:unless="${derechoCredito}" name="form-field-checkbox" type="checkbox" class="ace" id="campoCredito" disabled="disabled" th:checked="${ordenServicio.tipoPago == 'Credito' ? 'true' : 'false'}"/>
																		<span class="lbl"> Pago al cr&eacute;dito</span>
																	</label>
															</div>
														</div>												
													</div>	
												</div>											
											</div>
										</div>
									</div>
								</div>
							</form>						
							<div id="modal-nuevoDestino" class="modal" tabindex="-1">
									<div class="space"></div>
									<div class="space"></div>
									<div class="space"></div>
<!-- 								<div class="modal-dialog"> -->
									<div class="modal-content col-md-8 col-md-offset-2" >
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal">&times;</button>
											<h4 class="blue bigger">Agregar nuevo destino</h4>
										</div>
							
										<div class="modal-body overflow-visible">
											<div class="row">				
												<div class="col-xs-4">				
													<div class="form-group">
														<div class="form-group">
															<label for="form-field-first">Zona</label>				
															<div>
																<input id="zona" type="text" class="form-control search-query" role="textbox"/>
															</div>
														</div>														
													</div>				
													<div class="space-4"></div>
													<label for="form-field-username">Direcci&oacute;n</label>				
													<div class="input-group">
														<input type="text" class="form-control search-query" role="textbox" id="address" />
														<span class="input-group-btn">
														<button type="button" onclick="codeAddress()" class="btn btn-sm btn-primary">
															<i class="fa fa-map-marker"></i>
														</button>
														</span>
													</div>													
												</div>
												<div class="col-xs-8">				
													<div id="map-canvas-destino"></div>
												</div>
											</div>
										</div>
							
										<div class="modal-footer">
											<form action="#" >		
											<button type="button" id="btnAgregarDestino" class="btn btn-sm btn-primary">
												<i class="fa fa-check"></i>
												Agregar
											</button>
											
											<button class="btn btn-sm" data-dismiss="modal">
												<i class="fa fa-times"></i>
												Cancelar
											</button>
											</form>
										</div>
									</div>
<!-- 								</div> -->
							</div><!-- fin modal -->
							<div id="modal-origen" class="modal" tabindex="-1">
									<div class="space"></div>
									<div class="space"></div>
									<div class="space"></div>
<!-- 								<div class="modal-dialog"> -->
									<div class="modal-content col-md-8 col-md-offset-2" >
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal">&times;</button>
											<h4 class="blue bigger">Punto de Partida</h4>
										</div>
							
										<div class="modal-body overflow-visible">
											<div class="row">				
												<div class="col-xs-4">				
													<div class="form-group">
														<div class="form-group">
															<label for="form-field-first">Zona</label>				
															<div>
																<input id="zonaOrigen" type="text" class="form-control search-query" role="textbox"/>
															</div>
														</div>														
													</div>				
													<div class="space-4"></div>
													<label for="form-field-username">Direcci&oacute;n</label>				
													<div class="input-group">
														<input type="text" class="form-control search-query" role="textbox" id="addressOrigen" />
														<span class="input-group-btn">
														<button type="button" onclick="codeAddressOrigen()" class="btn btn-sm btn-primary">
															<i class="fa fa-map-marker"></i>
														</button>
														</span>
													</div>													
												</div>
												<div class="col-xs-8">				
													<div id="map-canvas-origen"></div>
												</div>
											</div>
										</div>
							
										<div class="modal-footer">
											<form action="#">		
											<button type="button" id="btnAgregarOrigen" class="btn btn-sm btn-primary">
												<i class="fa fa-check"></i>
												Agregar
											</button>
											
											<button class="btn btn-sm" data-dismiss="modal">
												<i class="fa fa-times"></i>
												Cancelar
											</button>
											</form>
										</div>
									</div>
<!-- 								</div> -->
							</div><!-- fin modal -->
							<div id="modal-ruta" class="modal" tabindex="-1" >
									<div class="space"></div>
									<div class="space"></div>
									<div class="space"></div>
<!-- 								<div class="modal-dialog"> -->
									<div class="modal-content col-md-8 col-md-offset-2" >
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal">&times;</button>
											<h4 class="blue bigger">Ruta aproximada</h4>
										</div>
							
										<div class="modal-body overflow-visible">
											<div class="row">
												<div class="col-xs-12">				
													<div id="map-canvas-ruta"></div>
												</div>
											</div>
										</div>
							
										<div class="modal-footer">											
											<button class="btn btn-sm" data-dismiss="modal">
												<i class="fa fa-times"></i>
												Cancelar
											</button>
										</div>
									</div>
<!-- 								</div> -->
							</div><!-- fin modal -->
							<div id="modal-registro" class="modal" tabindex="-1" data-keyboard="false" data-backdrop="static">
									<div class="space"></div>
									<div class="space"></div>
									<div class="space"></div>
<!-- 								<div class="modal-dialog"> -->
									<div class="modal-content col-md-4 col-md-offset-4" >
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal">&times;</button>
											<h4 class="blue bigger">&iquest;Desea generar <span id="numeroOrdenes"> </span> &oacute;rden(es) de servicio?</h4>
										</div>							
										<div class="modal-footer">
											<button type="button" class="btn btn-sm btn-primary" id="btnRegistrarSolicitud">
												<i class="fa fa-check"></i>
												<span>Registrar</span>
											</button>								
											<button class="btn btn-sm" data-dismiss="modal">
												<i class="fa fa-times"></i>
												Cancelar
											</button>
										</div>
									</div>
<!-- 								</div> -->
							</div><!-- fin modal -->
							<div class="space"></div>
							<div class="col-xs-12 btn-group">								
									<button type="button" class="btn btn-success btn-sm col-xs-2" id="btnValidarSolicitud">
										<i class="fa fa-check align-top bigger-150"></i>
										<span>Modificar</span>
									</button>
									<a href="/serviciosRecientes" th:href="@{/serviciosRecientes}" class="btn btn-sm col-xs-2" >
										<i class="fa fa-times align-top bigger-150"></i>
										Cancelar
									</a>
							</div>							
							<hr/>
							<div class="space"></div>
							<div class="space"></div>
							<div class="widget-box">
								<div class="widget-header widget-header-flat">
									<h4>Historial de &uacute;ltimos servicios</h4>
								</div>
	
								<div class="widget-body">
									<div class="widget-main">
										<div class="row">											
											<div class="col-xs-12">
												<div class="table-responsive">							
													<table id="tabla-historial" class="table table-bordered table-hover table-fixed-header">
														<thead>
															<tr>
																<th>N&uacute;mero Reserva</th>
																<th>Duplicar</th>
																<th>Pasajero</th>
																<th>
																	<i class="fa fa-clock-o bigger-110 hidden-480"></i>
																	Fecha
																</th>
																<th>Hora inicio</th>
																<th>Conductor</th>
																<th>Tipo veh&iacute;culo</th>
																<th>Tipo servicio</th>
																<th>Origen</th>
																<th>Destino</th>
															</tr>
														</thead>
														<tbody>														
															<tr th:each="orden : ${pasajero.ordenesDeServicio}">
																<td th:text="${orden.numReserva}"></td>
																<td class="center">
																	<button class="btn btn-white btnCopiarOrden">
																		<i class="fa fa-copy align-top bigger-125"></i>
																	</button>
																</td>
																<td th:text="${pasajero.nombreCompleto}">Perico Palotes</td>
																<td th:text="${#dates.format(orden.fechaServicio, #messages.msg('date.formatFecha'))}">30/12/2013</td>
																<td th:text="${#dates.format(orden.fechaServicio, #messages.msg('date.formatHora'))}">14:30</td>
																<td th:text="${orden.unidadMovil != null} ? ${orden.unidadMovil.conductor.nombreCompleto} : 'No asignado'"></td>
																<td th:text="${orden.tipoVehiculo}">Van</td>
																<td th:text="${orden.tipoServicio}">Punto a punto</td>
																<td th:utext="${orden.puntoOrigen.zona.nombre} + '&lt;br/&gt;' + ${orden.puntoOrigen.direccion}">Magdalena 1 <br/> Av. Sucre 873</td>
																<td th:utext="${orden.destinos.size() != 0 }? ${orden.destinoUltimo.puntoDestino.zona.nombre} + '&lt;br/&gt;' + ${orden.destinoUltimo.puntoDestino.direccion}">Comas 1 <br/> Calle Beta Mz. M</td>
															</tr>																								
							<!-- 							<tr th:if="${servicios.isEmpty()}"> -->
							<!-- 								<td colspan="13">No se encontraron servicios recientes</td> -->
							<!-- 							</tr> -->
														</tbody>
													</table>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							
							<form style="display: hidden" th:action="@{/modificarServicio}" method="POST" id="formSubmit">
							 	  <input type="hidden" id="submitTipoServicio" name="tipoServicio" value=""/>
							 	  <input type="hidden" id="submitTipoVehiculo" name="tipoVehiculo" value=""/>
							 	  <input type="hidden" id="submitMaleteraAmplia" name="maleteraAmplia" value=""/>
							 	  <input type="hidden" id="submitPagoAlCredito" name="pagoAlCredito" value=""/>
								  <input type="hidden" id="submitDestinos" name="destinos" value=""/>
								  <input type="hidden" id="submitOrigen" name="origen" value=""/>
								  <input type="hidden" id="submitPasajeros" name="pasajeros" value=""/>
								  <input type="hidden" id="submitFechas" name="fechas" value=""/> 
								  <input type="hidden" id="submitHoras" name="horas" value=""/> 
								  <input type="hidden" name="numReserva" th:value="${ordenServicio.numReserva}"/>
								  <input type="hidden" id="submitCentroCosto" name="centroCosto" value=""/> 								  
							</form>												
						</div>						
					</div>	
				</div>					
			</div><!-- /.page-content -->
		
		<style type="text/css">
				.navX{ max-height: 250px; overflow-y:scroll; }
				 #map-canvas-destino, #map-canvas-origen, #map-canvas-ruta  {
	       		 width: 100%;
	     	     height: 400px;
	    	     }
	    	     .pac-container {
				    background-color: #FFF;
				    z-index: 20;
				    position: fixed;
				    display: inline-block;
				    float: left;
				}
				.modal{
				    z-index: 20;   
				}
				.modal-backdrop{
				    z-index: 10;        
				}
/* 				.table-scroll { */
/* 				  height:200px; */
/* 				  overflow:auto; */
/* 				}​ */
		</style>
		
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.2&amp;sensor=false&amp;channel=PE-MAPS&amp;language=es&amp;components=country:PE&amp;libraries=places"></script>
		
		<script src="../../static/handsontable/jquery.handsontable.full.js" th:src="@{/static/handsontable/jquery.handsontable.full.js}" ></script>
		
		<script src="../../static/custom/jquery.dataTables.min.js" th:src="@{/static/custom/jquery.dataTables.min.js}"></script>
<!-- 		<script src="../../static/custom/jquery.dataTables.bootstrap.js" th:src="@{/static/custom/jquery.dataTables.bootstrap.js}"></script> -->
		<script src="../../static/datepicker/bootstrap-datepicker.js" th:src="@{/static/datepicker/bootstrap-datepicker.js}"></script>
		<script src="../../static/datepicker/bootstrap-datepicker.es.js" th:src="@{/static/datepicker/bootstrap-datepicker.es.js}"></script>
		
		<script th:inline="javascript">
		// <![CDATA[
		var map;
		var mapRuta;
		var mapOrigen;
		var geocoder;
		var marker;
		var markerOrigen;
		var directionsDisplay;
		var directionsService = new google.maps.DirectionsService();
		var tablaDestinos;
		var editarDestinos = true;
		
		function initialize() {
			geocoder = new google.maps.Geocoder();
			directionsDisplay = new google.maps.DirectionsRenderer();
			var latlng = new google.maps.LatLng(-12.076871051369057, -76.99525272135588);
			var mapOptions = {
			    zoom: 17,
			    center: latlng
			}
			map = new google.maps.Map(document.getElementById('map-canvas-destino'), mapOptions);
			
			mapOrigen = new google.maps.Map(document.getElementById('map-canvas-origen'), mapOptions);
		  
		    mapRuta = new google.maps.Map(document.getElementById('map-canvas-ruta'), {
			    center: new google.maps.LatLng(-33.8665433, 151.1956316),
			    zoom: 15
			  });
		  
		    var aOptions = {
		    		  types: ['(cities)'],
		    		  componentRestrictions: {country: "pe"}
		    		 };
		    
		  var autocomplete = new google.maps.places.Autocomplete(document.getElementById('zona'), aOptions);
		  autocomplete.bindTo('bounds', map);
		  var autocompleteOrigen = new google.maps.places.Autocomplete(document.getElementById('zonaOrigen'), aOptions);
		  autocomplete.bindTo('bounds', mapOrigen);
		  directionsDisplay.setMap(mapRuta);
		}
		
		function calcRoute() {
			  var td = tablaDestinos.fnGetData().length;
			  var start = new google.maps.LatLng($('#campoLatitud').val(), $('#campoLongitud').val());
			  var end;
			  var waypts = [];
			  if(td == 0){
				  end = start;
			  } else {
				  end = new google.maps.LatLng(tablaDestinos.fnGetData(td-1)[4], tablaDestinos.fnGetData(td-1)[5]);
				  for (var i = 0; i < td-1; i++) {
					  waypts.push({location:new google.maps.LatLng(tablaDestinos.fnGetData(i)[4], tablaDestinos.fnGetData(i)[5]),stopover:true});
				  }				  
			  }

			  var request = {
			      origin: start,
			      destination: end,
			      waypoints: waypts,
			      travelMode: google.maps.TravelMode.DRIVING
			  };
			  
			  directionsService.route(request, function(response, status) {
			    if (status == google.maps.DirectionsStatus.OK) {
			      directionsDisplay.setDirections(response);
			      var route = response.routes[0];
			    } else {
			    	alert('Vista de Ruta no disponible para conjunto de direcciones');
			    }
			  });
		}
		
		function codeAddress() {
			 var address = encodeURIComponent(document.getElementById('address').value + ',' + document.getElementById('zona').value);			
			 $.ajax({  
			  type : "Get",   
			  url : "/taxis/getGeocode",   
			  data : "direccion=" + address,  
			  success : function(response) {
				  var coordenadas = new google.maps.LatLng(response.latitud, response.longitud);
				  map.setCenter(coordenadas);
				     if(marker != null){
				   	  marker.setMap(null);
				     }		      
				     marker = new google.maps.Marker({
				         map: map,
				         position: coordenadas,
				         animation: google.maps.Animation.DROP
				  });
				  google.maps.event.trigger(map, "resize");
			  },  
			  error : function(e) {  
			   alert('Direcci\u00F3n erronea');   
			  }  
			 });  
		}  
		
		function codeAddressOrigen() {
			 var address = encodeURIComponent(document.getElementById('addressOrigen').value + ',' + document.getElementById('zonaOrigen').value);			
			 $.ajax({  
			  type : "Get",   
			  url : "/taxis/getGeocode",   
			  data : "direccion=" + address,  
			  success : function(response) {
				  var coordenadas = new google.maps.LatLng(response.latitud, response.longitud);
				  mapOrigen.setCenter(coordenadas);
				     if(markerOrigen != null){
				    	 markerOrigen.setMap(null);
				     }
				     markerOrigen = new google.maps.Marker({
				         map: mapOrigen,
				         position: coordenadas,
				         animation: google.maps.Animation.DROP
				  });
				  google.maps.event.trigger(mapOrigen, "resize");
			  },  
			  error : function(e) {  
			   alert('Direcci\u00F3n erronea');
			  }  
			 });  
		} 
		
		 $("#modal-nuevoDestino").on("shown.bs.modal", function () {
			 google.maps.event.trigger(map, "resize");
			});
		 
		 $("#modal-origen").on("shown.bs.modal", function () {
			 google.maps.event.trigger(mapOrigen, "resize");
			});
		 
		 $("#modal-ruta").on("shown.bs.modal", function () {
			 calcRoute();
			 google.maps.event.trigger(mapRuta, "resize");
			});
		
		google.maps.event.addDomListener(window, 'load', initialize);
		
		 $(document).ready(function(){
			  var cyanRenderer = function (instance, td, row, col, prop, value, cellProperties) {
				  Handsontable.renderers.TextRenderer.apply(this, arguments);
				  $(td).css({
				    background: '#B3F0EA'
				  });
				};				
			  
			  var dataPasajero = [[$("#campoP0").val(), $("#campoP1").val(), $("#campoP2").val(), $("#campoP3").val(),$("#campoP4").val(),$("#campoP5").val()]];
			  
				
			  $("#excelGrid").handsontable({
				rowHeaders: true,
				minSpareRows: 1,
				startRows: 1,
				maxRows : 1,
				stretchH: 'all',
			    colHeaders: ['Nombres', 'Apellidos', 'T. doc.', 'Nro doc', 'Celular', 'Registrado'],
			    data: dataPasajero,
			    columns: [
			              {
			            	  readOnly: true,
			              },
			              {
			            	  readOnly: true,  
			              },
			              {
			            	  readOnly: true,
			              },
			              {
			            	  readOnly: true,
			              },
			              {
			            	  readOnly: true,
			              },
			              {
			            	  readOnly: true,
			            	  renderer: cyanRenderer
			              }
			            ]
			  });
// 			  ht.setDataAtCell(index-1,0,ui.item.nombres);
//           	ht.setDataAtCell(index-1,1,ui.item.apellidos);
//           	ht.setDataAtCell(index-1,2,ui.item.tipoDoc);
//           	ht.setDataAtCell(index-1,3,ui.item.numDoc);
//           	ht.setDataAtCell(index-1,4,ui.item.celular);
//           	if(ui.item.flagPertenece == 'true'){
//           		ht.setDataAtCell(index-1,5,'Si');
//           	} else {
//           		ht.setDataAtCell(index-1,5,'No');
//           	}
			
			 $("body").delegate(".btnCopiarOrden", "click", function () {
				  var codigoOrden = tablaHistorial.fnGetData($(this).closest("tr").index())[0];
				  $.ajax({
					  type : "Get",   
					  url : "/taxis/copiarOrden",   
					  data : "codigoOrden=" + codigoOrden,  
					  success : function(json) {
						  table = $('#tabla-destinos').dataTable();  
						  oSettings = table.fnSettings();  
						  table.fnClearTable(this);
						  var total = 0;
						  for (var i=0; i<json.aaData.length; i++) 
						  {  
						    table.oApi._fnAddData(oSettings, json.aaData[i]);  
						    total = total + parseFloat(table.fnGetData(i)[2]);
						  }  
						  oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();  
						  table.fnDraw();
						  $('#campoTotal').text(total);
						  $('#campoDestino').val(table.fnGetData(0)[0]);
						  $('#campoZonaDestino').val(table.fnGetData(0)[1]);
						  $( "#campoOrigen" ).val(json.origen[0]);
						  $( "#campoZona" ).val(json.origen[1]);
						  $( "#campoLatitud" ).val(json.origen[2]);
						  $( "#campoLongitud" ).val(json.origen[3]);
						  $( "#campoTipoServicio" ).val(json.tipoServicio);
						  if($("#campoTipoServicio").val() == 'punto a punto' || $("#campoTipoServicio").val() == 'courier' ){
							  $("#divDestino1").show();
							  $("#divDestino2").show();
						  } else {
							  $("#divDestino1").hide();
							  $("#divDestino2").hide();
						  }
						  
						  if(table.fnGetData().length < 2) {
							  $('#destinoUnico').show();	
							  $('#destinosMultiples').hide();							  
						  }
						  if(table.fnGetData().length < 1) {
							  $('#btnDestinos2').hide();
						  }
						  
						  if(table.fnGetData().length > 0) {
							  $('#btnDestinos2').show();
						  }
						  if(table.fnGetData().length > 1) {
							  $('#destinoUnico').hide();	
							  $('#destinosMultiples').show();
						  }
					  },  
					  error : function(e) {  
						  alert('Orden no pudo ser copiada');  
					  }  
				  });
				  
			  });
			  $('#excelGrid table').addClass('table-hover');
			  
			  tablaDestinos = $('#tabla-destinos').dataTable({
				  "aoColumns": [ 
				    			null,
				    			null,
				    			null,
				    			null,
				    			{"bVisible": false},
				    			{"bVisible": false}
				    		],
				   "oLanguage": {
				          "sEmptyTable":     "Ingrese un destino"
				      },
				   "bFilter": false,
				   "bInfo": false,
				   "bLengthChange": false,
				   "bPaginate": false,
				   "bSort": false				   
			  });
			  
			  if($("#campoTipoServicio").val() == 'punto a punto' || $("#campoTipoServicio").val() == 'courier' ){
				  $("#divDestino1").show();
				  $("#divDestino2").show();
			  } else {
				  $("#divDestino1").hide();
				  $("#divDestino2").hide();
			  }
			  
			  if(tablaDestinos.fnGetData().length < 2) {
				  $('#destinoUnico').show();	
				  $('#destinosMultiples').hide();							  
			  }
			  if(tablaDestinos.fnGetData().length < 1) {
				  $('#btnDestinos2').hide();
			  }
			  
			  if(tablaDestinos.fnGetData().length > 0) {
				  $('#btnDestinos2').show();
			  }
			  if(tablaDestinos.fnGetData().length > 1) {
				  $('#destinoUnico').hide();	
				  $('#destinosMultiples').show();
			  }
			  
			  tablaHistorial = $('#tabla-historial').dataTable({
				  "aoColumns": [
				                {"bVisible": false},
				                null,
				    			null,
				    			null,
				    			null,
				    			null,
				    			null,
				    			null,
				    			null,
				    			null
				    		],
				   "oLanguage": {
				          "sEmptyTable":     "Ning$uacute;n pasajero seleccionado presente historial"
				      },
				   "bFilter": false,
				   "bInfo": false,
				   "bLengthChange": false,
				   "bPaginate": false,
				   "bSort": false				   
			  });
			  
			  $( "#btnAgregarDestino" ).click(function() {
				  var origen = [encodeURIComponent(document.getElementById('campoOrigen').value),document.getElementById('campoZona').value,document.getElementById('campoLatitud').value,document.getElementById('campoLongitud').value]; 
				  var destinos = []
				  if(editarDestinos == false){
					  destinos = tablaDestinos.fnGetData();
				  }
				  var nuevaDireccion = encodeURIComponent(document.getElementById('address').value);
				  var nuevaZona = encodeURIComponent(document.getElementById('zona').value);
				  var tipoServicio = $( "#campoTipoServicio" ).val();
				  $.ajax({
					  type : "Get",   
					  url : "/taxis/agregarDestinos",   
					  data : "destinos=" + destinos + "&nuevaDireccion=" + nuevaDireccion + "&nuevaZona=" + nuevaZona + "&origen=" + origen + "&tipoServicio=" + tipoServicio,  
					  success : function(json) {
						  table = $('#tabla-destinos').dataTable();  
						  oSettings = table.fnSettings();  
						  table.fnClearTable(this);
						  var total = 0;
						  for (var i=0; i<json.aaData.length; i++) 
						  {  
						    table.oApi._fnAddData(oSettings, json.aaData[i]);  
						    total = total + parseFloat(table.fnGetData(i)[2]);
						  }  
						  oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();  
						  table.fnDraw();
						  $('#campoTotal').text(total);
						  $('#campoDestino').val(table.fnGetData(0)[0]);
						  $('#campoZonaDestino').val(table.fnGetData(0)[1]);
						  if(table.fnGetData().length > 0) {
							  $('#btnDestinos2').show();
						  }
						  if(table.fnGetData().length > 1) {
							  $('#destinoUnico').hide();	
							  $('#destinosMultiples').show();
						  }
						  $('#modal-nuevoDestino').modal('hide');
					  },  
					  error : function(e) {  
						  alert('Direcci\u00F3n erronea');  
					  }  
				  });
		  	  });
			  
			  $( "#btnAgregarOrigen" ).click(function() {
				  var origen = [encodeURIComponent(document.getElementById('addressOrigen').value),encodeURIComponent(document.getElementById('zonaOrigen').value)]; 
				  var destinos = tablaDestinos.fnGetData();
				  var tipoServicio = $( "#campoTipoServicio" ).val();
				  $.ajax({  
					  type : "Get",   
					  url : "/taxis/actualizarOrigen",   
					  data : "destinos=" + destinos + "&origen=" + origen + "&tipoServicio=" + tipoServicio,  
					  success : function(json) {
						  table = $('#tabla-destinos').dataTable();  
						  oSettings = table.fnSettings();  
						  table.fnClearTable(this);  
						  var total = 0;
						  for (var i=0; i<json.aaData.length; i++) 
						  {  
						    table.oApi._fnAddData(oSettings, json.aaData[i]);
						    total = total + parseFloat(table.fnGetData(i)[2]);
						  }  
						  oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();  
						  table.fnDraw();
						  $('#campoTotal').text(total);
						  $( "#campoOrigen" ).val(json.origen[0]);
						  $( "#campoZona" ).val(json.origen[1]);
						  $( "#campoLatitud" ).val(json.origen[2]);
						  $( "#campoLongitud" ).val(json.origen[3]);
						  $('#modal-origen').modal('hide');
					  },  
					  error : function(e) {  
						  alert('Direcci\u00F3n erronea');
					  }  
				  });
		  	  });
			  
			  $("body").delegate(".btnEliminarDestino", "click", function () {
				  var origen = [encodeURIComponent(document.getElementById('campoOrigen').value),document.getElementById('campoZona').value,document.getElementById('campoLatitud').value,document.getElementById('campoLongitud').value]; 
				  var destinos =  tablaDestinos.fnGetData();
				  var index = $(this).closest("tr").index();
				  var tipoServicio = $( "#campoTipoServicio" ).val();
				  $.ajax({  
					  type : "Get",   
					  url : "/taxis/eliminarDestino",   
					  data : "destinos=" + destinos + "&index=" + index + "&origen=" + origen + "&tipoServicio=" + tipoServicio,  
					  success : function(json) {
						  table = $('#tabla-destinos').dataTable();  
						  oSettings = table.fnSettings();  
						  table.fnClearTable(this); 
						  var total = 0;
						  for (var i=0; i<json.aaData.length; i++) 
						  {  
						    table.oApi._fnAddData(oSettings, json.aaData[i]); 
						    total = total + parseFloat(table.fnGetData(i)[2]);
						  }  
						  oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();  
						  table.fnDraw();
						  $('#campoTotal').text(total);
						  $('#campoDestino').val(table.fnGetData(0)[0]);
						  $('#campoZonaDestino').val(table.fnGetData(0)[1]);						  
						  if(table.fnGetData().length < 2) {
							  $('#destinoUnico').show();	
							  $('#destinosMultiples').hide();							  
						  }
						  if(table.fnGetData().length < 1) {
							  $('#btnDestinos2').hide();
						  }
					  },  
					  error : function(e) {  
					   alert('Error: ' + e);   
					  }  
				  });
			  });
			  
			  $( "#flagEditarDestino" ).click(function() {
				  editarDestinos = true;
		  	  });
			  
			  $( "#flagAgregarDestino" ).click(function() {
				  editarDestinos = false;
		  	  });
			  
			  $( "#btnValidarSolicitud" ).click(function() {
				  var origen = [document.getElementById('campoOrigen').value,document.getElementById('campoZona').value,document.getElementById('campoLatitud').value,document.getElementById('campoLongitud').value]; 
				  if(origen != ',,,'){
					  var destinos =  tablaDestinos.fnGetData();
					  var pasajeros = $('#excelGrid').handsontable('getInstance').getData();
					  var aux = $('#campoFecha').text();
					  var parts = aux.split("-");
					  var fechas = new Date(parseInt(parts[2], 10),
					                    parseInt(parts[1], 10) - 1,
					                    parseInt(parts[0], 10));
					  var horas = $('#campoHora').text();
					  $("#submitDestinos").val(destinos);
					  $("#submitOrigen").val(origen);
					  $("#submitPasajeros").val(pasajeros);
					  $("#submitFechas").val(fechas);
					  $("#submitHoras").val(horas);
					  $("#submitCentroCosto").val($( "#campoCentroCosto" ).val());
					  $("#submitTipoServicio").val($( "#campoTipoServicio" ).val());
					  $("#submitTipoVehiculo").val($( "#campoTipoVehiculo" ).val());
					  $("#submitMaleteraAmplia").val($( "#campoMaletera" ).is(':checked'));
					  $("#submitPagoAlCredito").val($( "#campoCredito" ).is(':checked'));
					  $.ajax({
						  type : "Get",   
						  url : "/taxis/validarRegistro",   
						  data : "pasajeros=" + pasajeros + "&fechas=" + fechas + "&horas=" + horas + "&modoEditar=true", 
						  success : function(json) {
							  if(json.errores.length == 0){						  
								  $('#numeroOrdenes').text(json.numeroOrdenes);
								  $('#modal-registro').modal('show');
							  } else {
								  for (var i=0; i<json.errores.length; i++) 
								  {  
									  alert(json.errores[i]);
								  }
								  
							  }
						  },
						  error: function(xhr, status, error) {
							  alert(xhr.responseText);
						  }
					  });
				  }	else {
					  alert("Debe especificar un punto de origen");
				  }  
		  	  });
			  
			  $( "#btnRegistrarSolicitud" ).click(function() {
				 $('#modal-registro').modal('hide');
				 $("#formSubmit").submit();					 
			  });  
			  
			  
			  $('#campoTipoServicio').on('change', function() {
				  if($("#campoTipoServicio").val() == 'punto a punto' || $("#campoTipoServicio").val() == 'courier' ){
					  var origen = [encodeURIComponent(document.getElementById('campoOrigen').value),document.getElementById('campoZona').value,document.getElementById('campoLatitud').value,document.getElementById('campoLongitud').value]; 
					  var destinos =  tablaDestinos.fnGetData();
					  var tipoServicio = $( "#campoTipoServicio" ).val();
					  $.ajax({  
						  type : "Get",   
						  url : "/taxis/actualizarDestinos",   
						  data : "destinos=" + destinos + "&origen=" + origen + "&tipoServicio=" + tipoServicio,  
						  success : function(json) {
							  table = $('#tabla-destinos').dataTable();  
							  oSettings = table.fnSettings();  
							  table.fnClearTable(this);  
							  var total = 0;
							  for (var i=0; i<json.aaData.length; i++) 
							  {  
							    table.oApi._fnAddData(oSettings, json.aaData[i]);
							    total = total + parseFloat(table.fnGetData(i)[2]);
							  }  
							  oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();  
							  table.fnDraw();
							  $('#campoTarifa').val(parseFloat(0.0));
							  $('#campoTotal').text(total);
							  $("#divDestino1").show();
							  $("#divDestino2").show();
						  },  
						  error : function(e) {  
							  alert('Error al cambiar precios');
						  }
					  }); 
				  } else {
					  var tipoServicio = $( "#campoTipoServicio" ).val();
					  $.ajax({  
						  type : "Get",   
						  url : "/taxis/getTarifa",   
						  data : "tipoServicio=" + tipoServicio,  
						  success : function(json) {
							  $('#campoTarifa').val(parseFloat(json));
							  $('#campoTotal').text(parseFloat($('#campoTarifa').val()));
							  $("#divDestino1").hide();
							  $("#divDestino2").hide();
						  },  
						  error : function(e) {  
							  alert('Error al cambiar precios');
						  }
					  });
				  }
				});
			  
			  $('#campoTipoVehiculo').on('change', function() {
				  if($("#campoTipoVehiculo").val() == 'sedan'){
					  $("#campoMaletera").removeAttr("disabled");
					  
				  } else {					  
					  $("#campoMaletera").attr("disabled", true);
					  $("#campoMaletera").attr('checked', false);
				  }
				});
			  
		 });				
			// ]]>
		</script>		
	</body>
</html>